<template>
    <div>
        <a-modal
            v-model:visible="visible"
            width="900px"
            class="dialog-modal"
            :hide-cancel="true"
            :title="title"
        >
            <template #title></template>
            <a-row>
                <a-col :flex="1">
                    <a-empty v-if="devices.length === 0" />
                    <template v-for="device in devices" :key="device.id">
                        <a-row>
                            <a-col :span="4">{{ device.deviceName }}</a-col>
                            <a-col flex="12">
                                <a-empty v-if="device.props?.length === 0" />
                                <template
                                    v-for="prop in device.props"
                                    :key="prop.identifier"
                                >
                                    <a-space wrap>
                                        <a-tag
                                            checkable
                                            color="arcoblue"
                                            :checked="prop.checked"
                                            @check="
                                                (checked) =>
                                                    fnCheck(
                                                        checked,
                                                        device,
                                                        prop
                                                    )
                                            "
                                            >{{ prop.name }}</a-tag
                                        >
                                    </a-space>
                                </template>
                                <a-divider />
                            </a-col>
                        </a-row>
                    </template>
                </a-col>
            </a-row>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { findByStationId, getDeviceRunStatustList } from '../service';

    const emit = defineEmits(['checkDeviceProp']);

    const visible = ref(false);
    const devices = ref<any[]>([]);
    const props = defineProps({
        title: {
            type: String,
        },
    });
    function open() {
        visible.value = true;
    }

    const fetchDeviceRunStatusData = async (device: any) => {
        const data = await getDeviceRunStatustList({
            deviceId: device.id,
        });
        const { result } = data as any;
        device.props = result;
        if (device.props && device.props.length > 0) {
            device.props.forEach((prop: any) => {
                prop.checked = false;
            });
        }
    };
    // fetchDeviceRunStatusData({ deviceId: props.deviceId });
    const fetchDevicesByStationId = async (stationId: string) => {
        if (!stationId) {
            devices.value.length = 0;
            return;
        }
        const data = await findByStationId({
            stationId,
        });
        const { result } = data as any;
        if (result.length === 0) {
            // console.log(`stationId:${stationId}`);
            devices.value.length = 0;
            return;
        }
        devices.value = result;

        devices.value.forEach((dd: any) => {
            fetchDeviceRunStatusData(dd);
        });
    };
    const changTagChecked = (
        deviceId: string,
        identifier: string,
        checked: boolean
    ) => {
        // console.log(deviceId);
        // console.log(devices.value);
        const device: any[] = devices.value.filter((o) => {
            return o.id === parseInt(deviceId, 10);
        });
        const prop = device[0].props.filter((o: { identifier: string }) => {
            return o.identifier === identifier;
        });
        // console.log(prop);
        prop[0].checked = checked;
        // console.log(devices.value);
    };

    const fnCheck = (checked: boolean, device: any, prop: any) => {
        emit('checkDeviceProp', checked, device, prop);
        prop.checked = checked;
    };

    defineExpose({
        open,
        fetchDevicesByStationId,
        changTagChecked,
    });
</script>

<style scoped lang="less">
    .dialog-modal {
        .arco-tag {
            margin: 0 5px;
        }
    }
</style>
